<template>
    <el-dialog v-if="dialogVisible" :append-to-body="true" :close-on-click-modal='false' title="导出项目" :visible.sync="dialogVisible" @close="closeData()" width="800px">
        <div v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="exp_box">
                <div class="flexbox flexcenter">
                    <div class="font_14 color_01" style="margin-left:8px;margin-right:6px">项目任务条件设置</div>
                    <el-tooltip class="item" effect="dark" content="" placement="top">
                        <div slot="content" style="font-size:12;color:#fff;line-height:18px">
                            项目中的任务将按照以下条件进行筛选，未设置则代表全部数据。
                        </div>
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="10" cy="10" r="8" fill="#CFD4DD" />
                            <path d="M7.4 8.8544V8.9544H7.5H8.74454H8.84454V8.8544C8.84454 8.40304 8.93037 8.06505 9.09807 7.83666L9.09814 7.83671L9.10039 7.83337C9.28308 7.56236 9.58383 7.42692 10.0437 7.42692C10.3968 7.42692 10.6621 7.52052 10.8451 7.70414C11.0208 7.89135 11.1227 8.15083 11.1227 8.49176C11.1227 8.7406 11.0343 8.98223 10.8511 9.20803L10.7251 9.3559C10.3714 9.67381 10.0866 9.94944 9.87171 10.1838C9.65777 10.4171 9.50782 10.6151 9.43008 10.7769C9.26797 11.0923 9.20131 11.4719 9.20131 11.8984V12.0522V12.1522H9.30131H10.5568H10.6568V12.0522V11.8984C10.6568 11.6496 10.708 11.4341 10.8101 11.2286C10.9023 11.043 11.0356 10.8671 11.2215 10.7112L11.2215 10.7113L11.2233 10.7097C11.746 10.2493 12.0676 9.9484 12.1706 9.83314L12.1709 9.8334L12.1763 9.82623C12.4532 9.4545 12.6 8.98201 12.6 8.41484C12.6 7.72088 12.3729 7.16437 11.9116 6.75784C11.452 6.34177 10.8473 6.15 10.1201 6.15C9.29233 6.15 8.63194 6.38707 8.13991 6.8706C7.63532 7.35566 7.4 8.02186 7.4 8.8544ZM10.584 13.1633L10.5841 13.1632L10.5816 13.1609C10.3975 12.9879 10.1648 12.903 9.90175 12.903C9.63738 12.903 9.41603 12.9888 9.23284 13.1609C9.04613 13.3363 8.96114 13.5619 8.96114 13.8271C8.96114 14.0924 9.04613 14.318 9.23284 14.4934C9.41353 14.6632 9.634 14.7623 9.90175 14.7623C10.1661 14.7623 10.3875 14.6765 10.5707 14.5044C10.756 14.3303 10.8533 14.0945 10.8533 13.8271C10.8533 13.5588 10.7553 13.3357 10.584 13.1633Z" fill="white" stroke="white" stroke-width="0.2" />
                        </svg>
                    </el-tooltip>
                    <div class="reset_btn" @click="resetData()">重置</div>
                </div>
                <div class="flexbox flexcenter exp_task">
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">任务人员</span>
                            <span class="drop_title">{{exportData.project_member.length>0?repeatFind(exportData.project_member,userList,'id','nickname'):'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':exportData.project_member.length>0}">已选 {{exportData.project_member.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearQuery('project_member',1)" v-if="exportData.project_member.length>0">清除已选</el-link>
                            </div>
                            <el-checkbox-group v-model="exportData.project_member" class="check_style">
                                <el-checkbox :label="item.id" v-for="item in userList" :key='item.id'>
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <span class="font_14 color_02" style="margin:0 12px">订单日期</span>
                    <el-date-picker style="width:260px" value-format="yyyy-MM-dd" v-model="exportData.order_date" type="daterange" clearable size="small" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </div>
            <div class="flexbox flexcenter flexbetween mt_20">
                <span class="font_14 color_01">项目列表</span>
                <el-input placeholder="请输入项目名称搜索" size="small" style="width:220px" clearable prefix-icon="el-icon-search" v-model="queryInfo.query" @change="getDataList(1)">
                </el-input>
            </div>
            <el-table :data="tableData" class="com_table" height="300px" :row-key="(row)=>{ return row.id}" ref="planRef" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" :reserve-selection="true">
                </el-table-column>
                <el-table-column prop="project_name" label="项目名称">
                </el-table-column>
            </el-table>
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
            </el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="closeData()" class="el-button-width">取 消</el-button>
            <el-button plain size="small" @click="exportDown('all')" class="plain_blue el-button-width">导出全部</el-button>
            <el-button size="small" type="primary" @click="exportDown('rank')" class="el-button-width" :disabled="isDisable">导出已选</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            userList: [],
            loading: false,
            dialogVisible: false,
            queryInfo: {
                page: 1,
                limit: 20,
                query: "",
            },
            exportData: {
                project_member: [],
                order_date: [],
                project_id: [],
            },
            tableData: [],
            total: [],
        };
    },
    created() {
        
    },
    computed:{
        isDisable(){
            let isTuer = false
            if(this.exportData.project_member.length>0||this.exportData.order_date.length||this.exportData.project_id.length){
                isTuer = false
            }else{
                isTuer = true
            }

            return isTuer
        }
    },
    methods: {
        getData(){
            this.dialogVisible = true
            this.getUserList();
            this.getDataList(1);
        },
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "fxdata/revenue/projectListSimple",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        //获取人员
        async getUserList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szMediaList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.userList = res.data;
            }
        },

        repeatFind(b, a, id, name) {
            let arr = [];
            for (let i in b) {
                for (let o in a) {
                    if (b[i] == a[o][id]) {
                        arr.push(a[o][name]);
                    }
                }
            }
            return arr.toString();
        },

        // 清空筛选
        clearQuery(name, type) {
            if (type == 1) {
                this.exportData[name] = [];
            } else {
                this.exportData[name] = "";
            }
        },

        // 表格选中
        handleSelectionChange(v) {
            this.exportData.project_id = v.map((item) => {
                return item.id;
            });
        },

        //导出数据
        async exportDown(type) {
            let query = null;
            if (type == "rank") {
                query = this.exportData;
            } else {
                query = {
                    project_member: [],
                    order_date: [],
                    project_id: [],
                };
            }
            this.loading = true;
            const { data: res } = await this.$http.post(
                "export/DownloadTtask/mjysRevenue",
                query
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.$message({
                    message: "导出成功，请前往导出任务列表下载。",
                    type: "success",
                });
            }
        },

        closeData() {
            this.dialogVisible = false
            this.queryInfo = {
                page: 1,
                limit: 20,
                query: "",
            };

            this.exportData = {
                project_member: [],
                order_date: [],
                project_id: [],
            };

            this.tableData = [];
        },

        resetData(){
            this.exportData.project_member = []
            this.exportData.order_date = []
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.queryInfo.page = val;
            this.getDataList(val);
        },
    },
    components: {},
};
</script>


<style scoped>
.com_table {
    margin: 20px 0;
}
.exp_task {
    margin-top: 8px;
}
.exp_box {
    border: 1px solid #ebebeb;
    border-radius: 4px;
    padding: 14px 20px;
}
.reset_btn {
    margin-left: 10px;
}
</style>
